<template>
	<view class="container">
		<view class="tab t_one">
			<view :class="['t-item', tab_index == 1 ? 'select' : '']" @click="tabCheck(1)">
				<text>商品</text>
			</view>
			<view :class="['t-item', tab_index == 2 ? 'select' : '']" @click="tabCheck(2)">
				<text>服务</text>
			</view>
		</view>

		<view v-if="tab_index == 1" class="tab tab_two" :style="{ paddingTop: '88rpx' }">
			<view :class="['t-item', goods_type == 1 ? 'select' : '']" @click="goodsCheck(1)">
				<text>普通</text>
			</view>
			<view :class="['t-item', goods_type == 2 ? 'select' : '']" @click="goodsCheck(2)">
				<text>拼团</text>
			</view>
		</view>
		<view v-if="tab_index == 1" class="padding-about-34" :style="{ paddingTop: '20rpx' }">
			<view v-for="(item, index) in list_one" :key="index" class="view display-flex margin-top-20 alig"
				@click="selectGoods(item)">
				<image v-if="!ids.includes(item.goods_id)" :src="$img_path('/mine/check.png')"
					style="width: 40rpx; height: 40rpx" mode="heightFix"></image>
				<image v-else :src="$img_path('/mine/xcheck.png')" style="width: 40rpx; height: 40rpx" mode=""></image>
				<view class="display-flex space-between alig margin-left-20" style="width: calc(100% - 60rpx)">
					<image :src="$img_base_url(item.goods.image)" style="width: 260rpx; height: 260rpx"
						class="border-radius-12" mode="aspectFill"></image>
					<view class="file-1 display-flex flex-direction-column space-between margin-left-20"
						style="width: calc(100% - 280rpx)" @click="goGoodsDet(item)">
						<view class="">
							<view style="width: 100%" class="font-size-32 overflow-hidden font-weight-bold">
								{{ item.goods.title }}
							</view>
							<view class="font-size-24 color-999" style="margin-top: 16rpx">
								销量：{{ item.goods.sales }}
							</view>
							<!-- <view class="display-flex" style="margin-top: 16rpx;">
								<view class="tans color-FFF margin-right-10" style="background: #FF6602;border: #FF6602 1rpx solid;">
									标签标签
								</view>
								<view class="tans color-FFF margin-right-10" style="border: #0291FF 1rpx solid; color: #0291FF;">
									标签标签
								</view>
							</view> -->
						</view>
						<view class="" style="color: #ff2e2e; margin-top: 30rpx">
							<text class="font-size-32 font-weight-bold">¥ </text><text
								class="font-weight-bold font-size-40"> {{ item.goods.price }}</text>
							<!-- <text class="font-size-24 color-999" style="text-decoration: line-through;margin-left: 14rpx;">￥100.00</text> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="tab_index == 2" class="padding-about-34" :style="{ paddingTop: '88rpx' }">
			<view v-for="(item, index) in list_two" :key="index" class="view display-flex margin-top-20 alig">
				<image :src="item.check ? $img_path('/mine/xcheck.png') : $img_path('/mine/check.png')"
					style="width: 40rpx; height: 40rpx" mode="" @click="selectService(item)"></image>
				<!-- <image :src="$img_path('/mine/xcheck.png')" style="width: 40rpx;height: 40rpx;" mode=""></image> -->
				<view class="display-flex space-between alig margin-left-20" @click="goGoodsDet(item)">
					<image :src="$img_base_url(item.image)" style="width: 180rpx; height: 180rpx"
						class="border-radius-12" mode="aspectFill"></image>
					<view class="file-1 display-flex flex-direction-column space-between margin-left-20">
						<view class="">
							<view style="width: 380rpx" class="font-size-28 overflow-hidden font-weight-bold">
								{{ item.name }}
							</view>
							<view class="font-size-24 color-999"> 销量：{{ item.salenums }} </view>
							<view class="display-flex">
								<view v-for="(d, i) in item.tag_name.split(',')" :key="i"
									class="tans color-FFF margin-right-10" :style="{
                    background: i == 0 ? '#FF6602' : '#FFFFFF',
                    border: i == 0 ? '#FF6602 1rpx solid' : '#0291FF 1rpx solid',
                    color: i == 0 ? '#FFFFFF' : '#0291FF',
                  }">
									{{ d }}
								</view>
							</view>
						</view>
						<view class="" style="color: #ff2e2e">
							<text class="font-size-32 font-weight-bold">¥ </text><text
								class="font-weight-bold font-size-40"> {{ item.price }}</text>
							<!-- <text class="font-size-28 color-333">/台</text> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<div class="kong"></div>
		<div class="kong"></div>
		<div class="kong"></div>
		<view v-if="tab_index == 1" class="bottom position-fixed display-flex alig">
			<view class="padding-about-34 width-100 display-flex alig space-between">
				<view class="display-flex alig" @click="checkAllGoods">
					<image v-if="ids.length != list_one.length" :src="$img_path('/mine/check.png')"
						style="width: 40rpx; height: 40rpx" mode=""></image>
					<image v-else :src="$img_path('/mine/xcheck.png')" style="width: 40rpx; height: 40rpx" mode="">
					</image>
					<view class="font-size-26 margin-left-10"> 全选 </view>
				</view>
				<view class="display-flex alig">
					<view @click="cencal()" class="button text-center color-FFF font-size-26"
						style="width: 276rpx; height: 80rpx; font-size: 32rpx; line-height: 80rpx">
						取消收藏
					</view>
				</view>
			</view>
		</view>
		<view v-if="tab_index == 2" class="bottom position-fixed display-flex alig">
			<view class="padding-about-34 width-100 display-flex alig space-between">
				<view class="display-flex alig">
					<image @click="checkAll()"
						:src="isAll ? $img_path('/mine/xcheck.png') : $img_path('/mine/check.png')"
						style="width: 40rpx; height: 40rpx" mode=""></image>
					<!-- <image :src="$img_path('/mine/xcheck.png')" style="width: 40rpx;height: 40rpx;" mode=""></image> -->
					<view class="font-size-26 margin-left-10" @click="checkAll()"> 全选 </view>
				</view>
				<view class="display-flex alig">
					<view @click="cancelCollect" class="button text-center color-FFF font-size-26"
						style="width: 276rpx; height: 80rpx; font-size: 32rpx; line-height: 80rpx">
						取消收藏
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsCollect,
		groupCollectList,
		serviceGetlist
	} from "@/utils/api/userApi.js";
	import {
		followApi,
		groupFollowApi
	} from "@/utils/api/mallApi.js";
	import {
		handlefollow
	} from "@/utils/api/serviceApi.js";
	import {
		computed
	} from "uni_modules/ui-echarts/libs/mixin/mixin";
	export default {
		data() {
			return {
				navHeight: this.statusBarHeight + this.navBarHeight,
				tab_index: 1,

				goods_type: 1,
				ids: [],
				list_one: [],
				page_one: 1,
				total_one: 0,
				last_page_one: 0,

				list_two: [],
				page_service: 1,
				total_two: 0,
				last_page_two: 0,
			};
		},
		computed: {
			isAll() {
				return this.list_two.every((item) => item.check);
			},
		},
		onShow() {
			this.goods_type = 1;
			this.getgoodsCollect();
		},
		methods: {
			selectService(item) {
				item.check = !item.check;
			},
			tabCheck(v) {
				console.log(v)
				this.tab_index = v;

				if (v == 1) {
					this.page_one = 1;
					this.getgoodsCollect();
				} else {
					this.page_service = 1;
					this.serviceGetlist();
				}
			},

			goodsCheck(i) {
				this.page_one = 1;
				this.goods_type = i;
				this.getgoodsCollect();
			},
			// 服务
			serviceGetlist() {
				serviceGetlist({
					page: this.page_service,
				}).then((res) => {
					const list = res.data.map((item) => {
						return {
							...item,
							check: false,
						};
					});
					if (this.page_service == 1) {
						this.list_two = list;
					} else {
						this.list_two = [...this.list_two, ...list];
					}
				});
			},

			// 商品
			getgoodsCollect() {
				uni.showLoading();
				groupCollectList({
					page: this.page_one,
					type: this.goods_type == 1 ? "goods" : "groups",
				}).then((res) => {
					uni.hideLoading();
					if (this.page_one == 1) {
						this.list_one = res.data.data;
					} else {
						this.list_one = [...this.list_one, ...res.data.data];
					}
					this.total_one = res.data.total;
					this.last_page_one = res.data.last_page;
				});
			},

			selectGoods(data) {
				if (!this.ids.includes(data.goods_id)) {
					this.ids.push(data.goods_id);
				} else {
					let i = this.ids.indexOf(data.goods_id);
					this.ids.splice(i, 1);
				}
			},
			checkAllGoods() {
				if (this.ids.length < this.list_one.length) {
					let ids = this.list_one.map((e) => {
						return e.goods_id;
					});
					this.ids = ids;
				} else {
					this.ids = [];
				}
			},

			cencal() {
				if (this.ids.length == 0) {
					uni.showToast({
						title: "请先选择商品",
						icon: "none",
					});
				}
				let i = 0;
				this.ids.forEach((e) => {
					i++;
					console.log(e, "-", i);
					if (this.goods_type == 1) {
						followApi({
							id: e
						}).then((res) => {
							if (i == this.ids.length) {
								uni.showToast({
									title: "取消成功",
									icon: "none",
								});
								this.page = 1;
								this.ids = [];
								this.getgoodsCollect();
							}
						});
					} else {
						groupFollowApi({
							id: e
						}).then((res) => {
							if (i == this.ids.length) {
								uni.showToast({
									title: "取消成功",
									icon: "none",
								});
								this.page = 1;
								this.getgoodsCollect();
							}
						});
					}
				});
			},
			/* M加的接口 */
			// 服务-取消收藏
			cancelCollect() {
				let ids = this.list_two
					.filter((e) => e.check)
					.map((e) => e.id)
					.join(",");
				if (ids) {
					handlefollow({
						follow_id: ids,
						state: 0, //状态:0=取消关注,1=关注
					}).then((res) => {
						uni.showToast({
							title: "取消成功",
							icon: "none",
						});
						this.page = 1;
						this.serviceGetlist();
					});
				} else {
					uni.showToast({
						title: "请选择要取消收藏的服务",
						icon: "none",
					});
				}
			},
			// 服务 - 全选
			checkAll() {
				if (this.list_two.length == this.list_two.filter((e) => e.check).length) {
					this.list_two.forEach((e) => {
						e.check = false;
					});
				} else {
					this.list_two.forEach((e) => {
						e.check = true;
					});
				}
			},
			goGoodsDet(item) {
				console.log(this.tab_index, 111)
				if (this.tab_index == 2) {
					uni.navigateTo({
						url: `/pagesService/serviceDetail/serviceDetail?id=${item.id}`,
					});
				}
				if (this.tab_index == 1) {
					uni.navigateTo({
						url: `/pagesMall/goods/detail?id=${item.goods_id}`,
					});
				}
			},
		},
		onReachBottom() {
			if (this.tab_index == 1) {
				if (this.last_page_one > this.page_one) {
					this.page_one++;
					this.getgoodsCollect();
				}
			} else {
				this.page_service++;
				this.serviceGetlist();
			}
		},
	};
</script>

<style scoped lang="scss">
	.container {
		.tab {
			&.t_one {
				position: fixed;
				z-index: 2;
			}

			left: 0;
			right: 0;
			top: -1rpx;
			width: 100%;
			height: 88rpx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;

			&.tab_two {
				position: relative !important;
				z-index: 1;
			}

			.t-item {
				&:last-child {
					margin-left: 120rpx;
				}

				text {
					font-weight: 400;
					font-size: 30rpx;
					color: #999999;
					line-height: 42rpx;
				}

				&.select {
					text {
						color: #333333;
						position: relative;

						&::before {
							content: "";
							width: 60rpx;
							height: 4rpx;
							background: #e72a2a;
							border-radius: 2rpx;
							position: absolute;
							top: calc(100% + 10rpx);
							left: 50%;
							transform: translateX(-50%);
						}
					}
				}
			}
		}
	}

	.tans {
		padding: 4rpx 20rpx;
		font-size: 18rpx;
		border-radius: 6rpx;
	}

	.bottom {
		bottom: 0;
		width: 750rpx;
		height: 134rpx;
		background: #ffffff;
		box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
	}

	.view {
		padding: 20rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(223, 223, 223, 0.16);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
</style>